<template>
  <div>
    <!-- 头部 -->
    <head-nev msg="黑马优购" :backState="true"></head-nev>
    <!-- 购物车列表 -->
    <!-- <van-sticky :offset-top="47"> -->
    <van-row class="toubuxa">
      <!-- <van-cell-group class="toubux"> -->
        <!-- <van-cell icon="shop-o" title="购物车列表" /> -->
      <!-- </van-cell-group> -->
      <van-icon name="shop-o" />
      <span icon="shop-o"> 购物车列表</span>
     
    </van-row>
    <!-- </van-sticky> -->
    <!-- 商品展示 -->
    <ul class="bookspic">
      <li class="checkLi" v-for="(item,index) in cartList" :key="item.goods_id">
        <van-swipe-cell>
          <van-checkbox
            class="checkCenter"
            v-model="item.checked"
            @change="chooseChange(item.goods_id,index)"
          ></van-checkbox>
          <van-card :desc="item.goods_name" :thumb="item.goods_small_logo">
            <div slot="tags">
              <span class="slotPrice">￥{{item.goods_price}}</span>
            </div>
            <!-- :price="item.goods_price" -->
            <div slot="left">
              <van-tag plain type="danger">标签</van-tag>
            </div>
            <!-- 商品数量 -->
            <div slot="footer">
              <van-stepper
                integer
                v-model="item.goods_amount"
                :key="index"
                @change="(value) => {changeNum(value,item.checked,item.goods_id)}"
              />
            </div>
          </van-card>
          <template slot="right">
            <van-button type="danger" @click="delCart(index)" text="删除" />
          </template>
        </van-swipe-cell>
      </li>
    </ul>
    <!-- 提交订单 -->
    <van-submit-bar :price="priceTotal" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>

    <!-- 底部 -->
    <!-- <foot-nav></foot-nav> -->
    <div>
      <van-tabbar v-model="active" :safe-area-inset-bottom="true" active-color="red" route>
        <van-tabbar-item name="home" to="/home" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item name="categories" to="/categories" icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item name="search" to="/search" icon="search">搜索</van-tabbar-item>
        <van-tabbar-item name="cart" to="/cart" :info="total" icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item name="myinfo" to="/myinfo" icon="friends-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Toast.setDefaultOptions({ duration: 1000 })
export default {
  data() {
    return {
      selectedDate: [],
      chooseChecked: [],
      checkedAll: false,
      priceTotal: 0,
      cartList: [],
      switch: false,
      total: 0,
      active: 'cart',
      dbArr: []
    }
  },
  created() {
    this.goodsTotal()
    this.getCartList()
    this.pdChecked()
  },
  methods: {
    // 跳转订单页面
    onSubmit() {
      if (this.cartList.some(x => x.checked)) {
        localStorage.setItem('goodsIncate', JSON.stringify(this.cartList))
        this.$router.push('/order')
      } else {
        Toast('请先选择商品')
      }
    },
    // 获取数据
    getCartList() {
      this.cartList = JSON.parse(localStorage.getItem('goodsIncate'))
    },
    // 初始化全选与否
    pdChecked() {
      this.chooseChange()
    },
    //   单选
    chooseChange(id, i) {
      this.dbArr = []
      if (this.cartList) {
        this.cartList.forEach(x => {
          if (x.checked === true) {
            this.dbArr.push(x.cat_id)
          }
          if (this.dbArr.length < this.cartList.length) {
            this.checkedAll = false
          } else {
            this.checkedAll = true
          }
        })
        // 计算价格
        if (this.cartList.length === 0){
          this.checkedAll = false
        }
        this.totalPrice()
      }
      // console.log(this.cartList)
    },
    //   全选
    checkAll() {
      if (this.checkedAll) {
        this.cartList.forEach(x => (x.checked = false))
      } else {
        this.cartList.forEach(x => (x.checked = true))
      }
      this.totalPrice()
    },
    // 删除
    delCart(i) {
      this.cartList.splice(i, 1)
      localStorage.setItem('goodsIncate', JSON.stringify(this.cartList))
      this.chooseChange()
      this.totalPrice()
    },
    // 改变数量
    changeNum(v, check, id) {
      if (check) {
        this.totalPrice()
      }
      this.cartList.forEach(x => {
        if (x.goods_id === id) {
          x.goods_amount = v
        }
      })
      localStorage.setItem('goodsIncate', JSON.stringify(this.cartList))
      this.goodsTotal()
    },
    // 角标
    goodsTotal() {
      if (localStorage.getItem('goodsIncate') === null) {
        this.total = 0
      } else {
        const savedGoods = JSON.parse(localStorage.getItem('goodsIncate'))
        let n = 0
        savedGoods.forEach(item => (n += item.goods_amount))
        this.total = n
      }
    },
    // 算价钱方法
    totalPrice() {
      let tottl = 0
      this.cartList.forEach(x => {
        if (x.checked === true) {
          tottl += x.goods_price * x.goods_amount
        }
      })
      this.priceTotal = tottl * 100
    }
  }
}
</script>

<style>
.toubuxa {
  position: fixed;
  line-height: 33px;
  height: 33px;
  width: 100%;
  top: 46px;
  font-size: 16px;
  z-index: 20;
  background-color: #fff;
}
.van-submit-bar {
  position: fixed;
  bottom: 1.33333rem;
}
.bookspic {
  margin-top: 0.5rem;
  margin-bottom: 1.43333rem;
  /* margin-bottom: 200px; */
}
.van-card__price {
  color: red;
}
.van-card__header {
  margin-left: 2em;
}
.checkLi {
  position: relative;
  background-color: #fafafa;
}
.checkCenter {
  position: absolute;
  left: 0.1rem;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.van-card__desc {
  color: black !important;
  font-size: 12px;
}
.van-button--danger {
  height: 100%;
}
.van-ellipsis {
  overflow: visible;
  white-space: pre-wrap;
}
.slotPrice {
  position: absolute;
  top: 75px;
  color: red;
}
.van-stepper {
  position: absolute;
  top: 75px;
  right: 20px;
}
</style>